
<title>用户管理</title>

<link rel="stylesheet" href="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/basic/modals.css">

<script src="/statics/public/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.min.js"></script>
<script src="/statics/public/js/examples/tables/data-tables/api/row-details.js"></script>

<div class="page animation-fade page-index">
    <div class="page-content">
        <div class="panel" style="height: 100%;">
            <div class="panel-body">
                <div class="col-md-12 form-group" style="margin-bottom: 10px">
                    <button type="button" href="create/0/" data-toggle="modal" data-target="#modal" class="btn btn-success pull-left" id="add_button">
                        <i class="icon fa-plus" aria-hidden="true"></i> 添加
                    </button>

                </div>

                <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap" id="dataTable">
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>性别</th>
                        <th>手机号</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1050">
    <div class="modal-dialog modal-top">
        <div class="modal-content">
        </div>
    </div>
</div>

<div class="modal fade" id="exampleTabs" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 700px;">
        <div class="modal-content">

        </div>
    </div>
</div>

{# 右侧显示用户信息模态对话框 #}
<div class="modal fade" id="examplePositionSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar" role="dialog" tabindex="-1" style="display: none; z-index: 1041;">
    <div class="modal-dialog modal-sidebar modal-sm" style="justify-content: flex-start;">
        <div class="modal-content">

        </div>
    </div>
</div>



<script>

    (function ($) {

        var table = $('#dataTable').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "每页显示 _MENU_ 条",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
                "sInfoEmpty": "第 0 至 0 项，共 0 项",
                "sInfoFiltered": "",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "processing": true,
            "serverSide": true,  // 服务器模式
            "destroy": true,
            "ajax": "?type=ajax_json", // ajax 取数据
            "aaSorting": [
                [0, "asc"]
            ], // 默认排序
            "columns": [
                {
                    "data": "id",
                    "orderable": false,  // 禁止排序
                    "visible": false,       // 不可见
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "number",
                    "orderable": false,  // 禁止排序
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "name"
                },
                {
                    "data": "department_name"
                },
                {
                    "data": "sex",
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "phone",
                    "orderable": false  // 禁止排序
                },
                {
                    "data": "status",
                    "searchable": false     // 不可搜索
                }
            ]
        });


        // 点击表格中的员工信息展示右侧模态对话框
        $(".dataTable tbody").on('click', 'tr', function () {
            var user_id = table.row($(this)).data().id;
            $("#examplePositionSidebar .modal-content").empty();


            var url = "select/" + user_id + '/';

            $.get(url, function (data) {
                $("#examplePositionSidebar .modal-content").html(data);
                $("#examplePositionSidebar").modal('show');
            });
        });


    })(jQuery)

</script>
